react router dom Node.js | React | MongoDB | Express (6) 1. Create React App 구조 (structure) create react app명령 후 생기는 폴더와 파일들 실행 client > src > App.js 어디서 렌더링? -> client > src > index.js 어디서 페이지 표현? -> client > public > index.html webpack이 관리하는 부분 : src (public X) img 파일 넣고싶을때는... react router domReactnode.jsReact [React 에러 일지] ... is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> 🚫 [...] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> react-router-dom v6부터는, Switch 대신 Routes를 사용 Route 안에 component 대신 element 사용 그리고 <Routes> 자식으로는 <Route>만 가능하다.... Reactreact router domerrorReact 리액트 라우터 적용해보는 레시피 리액트 라우터 적용 레시피 라우터를 설치한다. npm install react-router-dom BrowserRouter로 App.js의 컴포넌트 전체를 감싼다. url에 따라 각각 다른 페이지로 보여주고 싶은 컴포넌트들을 Switch로 감싼다. Switch 외부에 있는 컴포넌트는 모든 페이지에 공통으로 노출된다. Switch 안의 컴포넌트들을 원하는 주소(path="/...")에 따라 각... 레시피리액트React리액트 라우터react router domReact (React) React-Router-Dom V6 업그레이드 반드시 공식 문서를 읽어보실 것을 권장드립니다! Switch 대신 Router로 변경 중첩 라우터에서 Outlet 컴포넌트를 사용해서 구현할 수 있다. useLocation : pathname을 가져와서 styled-components와 결합할 수 있다. useRoutes Hook을 통해 child의 child도 정의할 수 있다. (기존에는 react-route-config을 별도로 설치해야... react router domReactReact History 만들기 이렇게 사용하던 중 history파일을 따로 만들어 사용하는 법을 배웠다 우선 Router를 꺼내오고 Router안에는 history가 꼭 들어가야 하는데 이 history파일을 따로 만들었다 history파일을 따로 만들고 createBrowerHistory로 BrowerHistory를 만들어준다 위 에 Router에 이 만든 history를 넣어준다 이것을 활용해서 navigate라는 함... ReactBrowerHistoryreact router domBrowerHistory [리액트] react-router-dom v6 redux에서 navigate('/')하며 데이터 넘기기 react-router-dom v6에서는 useHistory();를 이용하여 다른 라우터에 접근하는것이 아닌, useNavigate()를 이용한다. 문제는 redux middleware에서 페이지 넘기기를 시도하려고 할때 useCreateBrowserHistory를 configStore에 선언하고 가져와 이용하는 방법도 있다고 들었으나,나는 잘 안된다. 내가 해결한 방법 dispatch하는 ... reduxv6react router domreact router dom FoodDeliveryApp Clone app.json: name은 앱 컴포넌트 이름이니 함부로 바꾸면 안 됨, 이거 바꾸면 네이티브 컴포넌트 이름도 다 바꿔야함, displayName은 앱 이름 변경용 android/app/src/main/java/com/fooddeliveryapp/MainActivity.java 의 getMainComponentName android/app/src/main/java/com/fooddeliver... reduxreact nativesocket.ioreact router domreact native react-router-dom 사용법 알아보기 프로젝트의 가장 최상단인 index.jsx 에서 BrowserRouter 를 적용하면 자식에서 라우팅 기능을 사용할 수 있다. Switch 는 여러 Route 들을 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링시켜준다. Switch 를 사용하면, 아무것도 일치하지 않았을때 보여줄 Not Found 페이지를 구현 할 수도 있다. Link 컴포넌트 사용 ⑤ 파라미터와 쿼리 파라미터는 ... react router domReactReact
Node.js | React | MongoDB | Express (6) 1. Create React App 구조 (structure) create react app명령 후 생기는 폴더와 파일들 실행 client > src > App.js 어디서 렌더링? -> client > src > index.js 어디서 페이지 표현? -> client > public > index.html webpack이 관리하는 부분 : src (public X) img 파일 넣고싶을때는... react router domReactnode.jsReact [React 에러 일지] ... is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> 🚫 [...] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> react-router-dom v6부터는, Switch 대신 Routes를 사용 Route 안에 component 대신 element 사용 그리고 <Routes> 자식으로는 <Route>만 가능하다.... Reactreact router domerrorReact 리액트 라우터 적용해보는 레시피 리액트 라우터 적용 레시피 라우터를 설치한다. npm install react-router-dom BrowserRouter로 App.js의 컴포넌트 전체를 감싼다. url에 따라 각각 다른 페이지로 보여주고 싶은 컴포넌트들을 Switch로 감싼다. Switch 외부에 있는 컴포넌트는 모든 페이지에 공통으로 노출된다. Switch 안의 컴포넌트들을 원하는 주소(path="/...")에 따라 각... 레시피리액트React리액트 라우터react router domReact (React) React-Router-Dom V6 업그레이드 반드시 공식 문서를 읽어보실 것을 권장드립니다! Switch 대신 Router로 변경 중첩 라우터에서 Outlet 컴포넌트를 사용해서 구현할 수 있다. useLocation : pathname을 가져와서 styled-components와 결합할 수 있다. useRoutes Hook을 통해 child의 child도 정의할 수 있다. (기존에는 react-route-config을 별도로 설치해야... react router domReactReact History 만들기 이렇게 사용하던 중 history파일을 따로 만들어 사용하는 법을 배웠다 우선 Router를 꺼내오고 Router안에는 history가 꼭 들어가야 하는데 이 history파일을 따로 만들었다 history파일을 따로 만들고 createBrowerHistory로 BrowerHistory를 만들어준다 위 에 Router에 이 만든 history를 넣어준다 이것을 활용해서 navigate라는 함... ReactBrowerHistoryreact router domBrowerHistory [리액트] react-router-dom v6 redux에서 navigate('/')하며 데이터 넘기기 react-router-dom v6에서는 useHistory();를 이용하여 다른 라우터에 접근하는것이 아닌, useNavigate()를 이용한다. 문제는 redux middleware에서 페이지 넘기기를 시도하려고 할때 useCreateBrowserHistory를 configStore에 선언하고 가져와 이용하는 방법도 있다고 들었으나,나는 잘 안된다. 내가 해결한 방법 dispatch하는 ... reduxv6react router domreact router dom FoodDeliveryApp Clone app.json: name은 앱 컴포넌트 이름이니 함부로 바꾸면 안 됨, 이거 바꾸면 네이티브 컴포넌트 이름도 다 바꿔야함, displayName은 앱 이름 변경용 android/app/src/main/java/com/fooddeliveryapp/MainActivity.java 의 getMainComponentName android/app/src/main/java/com/fooddeliver... reduxreact nativesocket.ioreact router domreact native react-router-dom 사용법 알아보기 프로젝트의 가장 최상단인 index.jsx 에서 BrowserRouter 를 적용하면 자식에서 라우팅 기능을 사용할 수 있다. Switch 는 여러 Route 들을 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링시켜준다. Switch 를 사용하면, 아무것도 일치하지 않았을때 보여줄 Not Found 페이지를 구현 할 수도 있다. Link 컴포넌트 사용 ⑤ 파라미터와 쿼리 파라미터는 ... react router domReactReact